介面

在加入 Sidebar 之前，我們需要先更動一下 Script Function Prototype。

目前是

type RunFunc func(*Container, *State) error

假如我們不對做一點設計而直接追加 Sidebar Container 的話，可能會變成

type RunFunc func(*Container, *Container, *State) error

這看起來很冗長。

所以我們要先把所有參數打包起來，

type Params struct {
	State   *State
	Main    *Container
	Sidebar *Container
}

讓 Script Function Prototype 變成：

type RunFunc func(*Params) error

後端

後端在跑 Script Function 時，就要建立兩個對應的 Container

pageFunc, _ := app.pageFuncs[name]

newMain := NewContainer(MainContainerID, notifyFunc)
newSidebar := NewContainer(SidebarContainerID, notifyFunc)

err := pageFunc(&Params{
	State:   state,
	Main:    newMain,
	Sidebar: newSidebar,
})

前端

在之前的 Typescript Refine，我們其實已經支援了 Multiple root ，只差有沒有真的去使用。

所以我們根據 MainContainerID 和 SidebarContainerID 去初始化對應的 div 後，就可以拿來使用。

export class AppBody extends Component<AppBodyProps> {
  // ...
  rootNode() {
    return this.props.forest.nodes[this.props.appConf.main_container_id]
  }

  sidebarNode() {
    return this.props.forest.nodes[this.props.appConf.sidebar_container_id]
  }

  render(): ReactNode {
    return (
      <div className="container" style={{ paddingTop: '60px' }}>
        {this.props.pageFound ?
          <section className="columns is-fullheight">
            {this.sidebarNode().children.length > 0 ?
              <aside className="column is-3">
                <div style={{ position: 'sticky', overflow: 'auto', top: '60px' }}>
                  <TComponent node={this.sidebarNode()}
                    update={(e) => { this.props.update(e) }}
                    upload={async (f) => await this.props.upload(f)} />
                </div>
              </aside> : ''}
            <div className="column">
              <TComponent node={this.rootNode()}
                update={(e) => { this.props.update(e) }}
                upload={async (f) => await this.props.upload(f)} />
            </div>
          </section>
          : <MessagePageNotFound />}
      </div>
    )
  }
}

下面的 Title / Author 欄位大概是目前的 sidebar 的，不確定之後會怎麼設計。